<template>
  <div id="app">
    <!-- 头部 -->
    <Header class="header-wrapper"></Header>
    <!-- 内容区 -->
    <Main class="main-wrapper"></Main>
    <!-- 底部 -->
    <Footer class="footer-wrapper"></Footer>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Main from '@/components/Main'
import Footer from "@/components/Footer";
export default {
  components: {
    Header,
    Main,
    Footer,
  },
};
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // align-items: center;
}

.header-wrapper{
  flex: 0 0 135px;
  width: 100%;
}

.main-wrapper{
  position: relative;
  top: 135px;
  flex: 1;
  width: 100%;
}

.footer-wrapper{
  width: 100%;
  flex: 0 0 40px;
}
</style>
